<template>
  <div class="option-container">
    <!-- 主体内容道具 -->
    <div v-for="(temp, index) in listNowUse" :key="index" class="option-item" @click="goToLink(temp.link)">
      <div class="option-image-container">
        <img :src="temp.img" class="option-image">
      </div>
      <div class="option-info">
        <div class="option-title">{{ temp.title }}</div>
        <div class="option-time">{{ temp.date }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['listNowUse'])
  },
  methods: {
    goToLink(link) {
      console.log(link)
      window.location.href = link
    }
  }
}
</script>

<style lang="scss" scoped>
.option-container {
  width: 75%;
  padding: 10px;
  overflow-y: scroll;
  color: #fff;
  font-size: 14px;
  .option-item {
    width: 100%;
    padding: 10px 5px;
    display: flex;
    border-top: 1px solid #ddd;
  }
  .option-image-container {
    width: 30%;
    height: 0;
    padding-bottom: 30%;
    border-radius: 10px;
    overflow: hidden;
    .option-image {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .option-info {
    width: 70%;
    padding: 0 10px;
    .option-title {
      padding-bottom: 20px;
    }
    .option-time {
      font-size: 12px;
      color: #9d9ea3;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>
